<template>
  <el-container class="main_con">
    <div class="filter_con ds_block nopt">
      <div class="filter_area">
        <!-- <el-input class="serach_input mr_15 mt_15" v-model="obj.user_id" placeholder="搜索用户"></el-input> -->
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.name" placeholder="商户名称"></el-input>
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.mobile" placeholder="用户手机号"></el-input>
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.company" placeholder="公司名称"></el-input>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table 
        @selection-change="selectItem"
         
        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="商户名称"></el-table-column>
        <el-table-column prop="company" label="公司"></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
        <el-table-column prop="district,address" label="商户地址">
          <template slot-scope="scope">{{scope.row.district}},{{scope.row.address}}</template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column prop="status_text" label="状态"></el-table-column>
        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="editItem(scope.row)">通过</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-button @click="delMul" size="medium">批量删除</el-button>
        <el-pagination 
          @current-change="changePage" 
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {
  getMerchantApplyList,
  delMerchantApply
} from '@/api/mall/merchant'; 
export default {
  data(){
    return {
      obj:{
        user_id:'',
        name:'',
        mobile:'',
        company:'',
        begin_date:'',
        end_date:''
      },
      objTemp:{},
      total:0,
      page:1,
      size:10,
      isLoading: false,
      list:[],
      listSelected:[]
    }
  },
  components: {
    DatePicker
  },
  mounted(){
    this.searchList();
  },
  methods:{
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];        
    },
    //查询数据
    searchList(){
      //复制查询对象
      this.objTemp = Object.assign({},this.obj);
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getMerchantApplyList(this.objTemp,this.page,this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //编辑数据(通过申请)
    editItem(obj){
      this.$router.push({path:'/merchant/item',query:{'aid':obj.id}});
      // getMerchant(obj.id).then(res => {
      //   let o = res.msg;
      //   this.$router.push({path:'/merchant/item',params:{'name':'asdasd'}});
      // });
    },
    //删除数据
    delItem(id){
      this.$confirm('是否要删除该条数据？').then(_ => {
        this.isLoading = true;
        delMerchantApply(id).then(res => {
            this.isLoading = false;
            //重新加载数据
            this.getDataList();
          })
      }).catch(_ => {
        //出错
      })
    },
    //选择记录
    selectItem(selection){
      this.listSelected = selection;
    },
    //批量删除商户
    delMul(){
      this.$alert('功能暂未开发!');
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
}
</script>

<style lang="scss"></style>